html, body
{
    font-family: sans-serif;
    text-align: center;
	font-size: small;
}

.red {color: red;}
.blue {color: blue;}

#fair {color: grey;}
#unfair {color: grey; }
#winPercent {font-size: larger; color: black}
#winner {font-size: larger; }

body
{
	margin: 0 60px 0 60px;
	min-width: 460px;
}

h1 { width: 300px; margin: 0 auto; border-bottom: 1px solid silver; }

#contest
{
	margin: -30px auto 0 auto;
	border: 1px solid transparent;
	height: 350px;
	max-width: 650px;
}

canvas.A { float: left; margin-left: -35px; }
canvas.B { float: right; margin-right: -35px;}
canvas.overlay { margin: 0 -80px 0 -80px; }

div.profile
{
	padding-top: 80px;
	width: 25%;
	min-width: 120px;
}

#profileA
{
	float: left;
	text-align: right;
}

#profileB
{
	float: right;
	text-align: left;
}

#diceSuccess
{
	clear: both;
    margin: 0 0 60px 0;
    text-align: left;
}

#diceSuccess table
{
    width: 100%;
    height: 250px;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin-top: -136px;
	margin-bottom: -150px;
}

#diceSuccess tr
{
    height: 100px;
}

#diceSuccess td
{
    margin: 0;
    padding: 0;
    border: 0;
    height: 100px;
    vertical-align: top;
}

div.bars
{
    border-top: 1px solid white;
    height: 100px;
    margin-top: 100px;
    margin-bottom: -100px;
    vertical-align: bottom;
}

div.barA, div.barB
{
    z-index: -1;
    width: 100%;
    position: relative;
    margin: 0 0 0 0;
}

div.barA { background-color: #F88; margin-right: -100%; float: left}
div.barB { background-color: #00F; float: right; opacity: 0.5}

#winMatrix
{
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    margin: 60px auto 40px auto;
    width: 154px;
    height: 154px;
}

#winMatrix div
{
    margin: 1px;
    width: 20px;
    height: 20px;
    padding: 0px;
    float: left;
}

div.winA { background-color: #F88 }
div.winB { background-color: #88F }

div.sideA, div.sideB
{
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

div.sideA { color: #F88; }
div.sideB { color: #88F; }

canvas.thumb
{
    position: relative;
    margin: 0px -8px 0px -8px;
    width: 16px;
    height: 32px;
    cursor: move;
}

#thumbA { top: -32px; }
#thumbB
{
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}


h2 {margin: -3px;}
span.note { display: block; font-size: smaller; color: grey; font-style: italic; margin-bottom: 8px; margin-top: 2px; }

span.values {display: block; font-size: smaller; margin-bottom: 20px;}